<template>
    <el-dialog custom-class="videoPlayerDialog" ref="videoPlayerDialog" :model-value="dialogVisible" :title="videoTitle"
        :before-close="cancelVideoJs">
        <div id="videoPlayerWrap"></div>
        <template #footer></template>
    </el-dialog>
</template>

<script>
import { defineComponent } from 'vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default defineComponent({
    name: "VideoJs",
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        videoTitle: {
            type: String,
            required: true
        },
        videoSrc: {
            type: String,
            required: true
        },
        videoType: {
            type: String,
            required: true
        },
        videoAutoPlay: {
            type: Boolean,
            default() {
                return true;
            },
            required: true
        },
    },
    emits: ['cancelVideoJs'],
    data() {
        return {
            player: null,
            options: {
                controls: true, // 开启交互，即是用户可控
                muted: false, // 开启视频时是否静音
                fluid: true, // 根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
                reload: "auto", // 重载
                // 其余设置根据需求添加！
                // poster: require('@/assets/images/海贼王.jpg'), // 视频封面
                sources: [
                    // 视频播放源，建议本地
                    {
                        src: this.videoSrc,
                        type: this.videoType
                    }
                ]
            },
        }
    },

    updated() {
        document.querySelector('#videoPlayerWrap').innerHTML = '<video id="videoPlayer" class="video-js vjs-16-9" controls></video>';
    },

    beforeUnmount() {
        // 销毁播放器
        if (this.player) {
            this.player.dispose();
        }
    },

    methods: {
        init() {
            this.$nextTick(() => {
                // let vSrc = this.videoSrc;
                this.options.sources[0].src = this.videoSrc;
                if (this.videoType.indexOf('mp4') != -1) {
                    this.options.sources[0].type = 'video/mp4';
                } else {
                    this.options.sources[0].type = this.videoType;
                }

                let ifAutoPlay = this.videoAutoPlay
                this.player = videojs('videoPlayer', this.options, function onPlayerReady() {
                    // How about an event listener?
                    this.on("canplaythrough", function () {
                        console.log("视频源数据加载完成")
                        // 判断是否自动播放
                        if (ifAutoPlay) {
                            this.play();
                        }
                    })

                    this.on('error', () => {
                        videojs.log('播放失败');
                        this.errorDisplay.contentEl().innerText = '不支持的 播放格式，播放失败'

                        // try {
                        //     window.location.href = 'cibn_player://' + vSrc;
                        // } catch (err) {
                        //     console.log('自定义URL协议播放失败' + err.message)
                        // }
                    });
                });
            });
        },
        play() {
            this.player.play();
        },
        pause() {
            this.player.pause();
        },
        cancelVideoJs() {
            if (this.player) {
                // 销毁播放器
                this.player.dispose();
                this.player = null;
            }

            this.$emit('cancelVideoJs');
        }
    },
})
</script>

<style scoped>
#videoPlayerWrap {
    width: 100%;
    max-height: 400px;
}

#videoPlayerWrap video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
</style>
